<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>City Blog - 发布</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .reset {
            position: absolute;
            right: 15px;
            bottom: 10px;
        }
    </style>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/myjs.js"></script>
</head>
<body style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) no-repeat fixed;">
<div th:insert="~{navigation :: nav}"></div>
<div class="container" style="background-color:#dfe6e9; padding-bottom: 20px;border-radius: 3px;">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12" style="border-right: 1px solid #8c8c8c;">
            <div style="width: 100%;height: 60px; margin-bottom: 20px; border-bottom: 1px solid #0f0f0f;"><h2><span
                    class="glyphicon glyphicon-edit" aria-hidden="true"></span>&ensp;发起</h2></div>
            <form action="/publish" method="post">
                <input type="hidden" name="id" th:value="${questionId}">
                <div class="form-group">
                    <label for="title">问题标题(简单扼要):</label>
                    <input type="text" th:value="${title}" class="form-control" name="title" id="title"
                           placeholder="问题标题.." autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="description">问题补充(必填，请参照右侧提醒):</label>
                    <div style="position: relative;">
                        <textarea class="form-control" th:text="${description}" name="description" id="description"
                                  placeholder="请输入你的问题..."
                                  rows="15" style="resize: none;"></textarea>
                        <div class="reset"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="tag">添加标签:</label>
                    <input type="text" th:value="${tag}" class="form-control" name="tag" id="tag"
                           placeholder="输入标签以，隔开" autocomplete="off" onclick="offTag()">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="select-tag"
                         style="margin:5px 10px 5px 0px; display: none;padding-left: 0px;">
                        <div>
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" th:each="tagss,stat:${Tags}" th:class="${stat.first?'active':''}">
                                    <a th:href="'#'+${tagss.getBigTag()}" aria-controls="home" role="tab"
                                       data-toggle="tab" th:text="${tagss.getBigTag()}"></a>
                                </li>
                            </ul>
                            <div class="tab-content" style="margin: 10px 5px 10px 0px;">
                                <div role="tabpanel" class="tab-pane" th:id="${tagss.getBigTag()}" th:each="tagss,stat:${Tags}" th:class="${stat.first?'active tab-pane':'tab-pane'}">
                                    <!--开发语言-->
                                    <span th:each="tagsss:${tagss.tag}" style="margin:5px;">
                                        <span class="label label-info"><svg class="icon"
                                                                            style="margin-right: 2px;width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                                            viewBox="0 0 1024 1024" version="1.1"
                                                                            xmlns="http://www.w3.org/2000/svg"
                                                                            p-id="2848"><path
                                                d="M849.5 465.9L566.8 183.3c-14.7-14.7-43.8-26.7-64.6-26.7l-214.7-0.1c-3.1 0-6.7 0.8-10 1.3l62.3 62.3c32.4 32.3 32.4 84.9 0 117.2-32.3 32.4-84.9 32.4-117.2 0L157 271.6c-1.5 6.3-2.5 12.4-2.5 18l0.6 215.5c0 20.9 12.1 49.9 26.8 64.5l281.7 281.7c27.5-90.4 76.9-173.4 144.3-240.8 67.6-67.7 150.9-117.1 241.6-144.6zM309.8 307.4c15.8-15.8 15.8-41.5 0-57.2L135.6 75.9C119.9 60 94.2 60 78.4 75.9a40.529 40.529 0 0 0-0.1 57.2l174.3 174.3c15.7 15.7 41.4 15.7 57.2 0zM930 546.9l-46.6-46.6c-89.2 22.8-174.6 69.3-245.4 140.2-70.9 70.9-117.3 156.3-140.2 245.4l46.6 46.6c36.7 36.7 96.9 36.7 133.7 0l252-252c36.6-36.7 36.6-96.9-0.1-133.6z"
                                                p-id="2849"></path></svg><span
                                                onclick="toTag(this)" th:text="${tagsss}" th:data-tag="${tagsss}"></span></span>
                                     </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 alert alert-danger" th:if="${error!=null}"
                             th:text="${error}" role="alert"></div>
                        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12" th:if="${error==null}"></div>
                        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 ">
                            <button th:text="${edit}!=null?${edit}:'提交'" type="submit" class="btn btn-success"
                                    style="margin-left: 50%;margin-top: 7px">发布
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <br/><br/><br/>
            <h2>问题发起指南</h2>
            <h5>• 问题标题:请用精简的语言描述您发布的问题,不超过25字</h5><br/>
            <h5>• 问题补充:详细补充您的问题内容,并确保问题描述清晰直观,并提供一些相关的资料</h5><br/>
            <h5>• 择标签:选择一个或者多个合适的标签,用标签不超过10个字</h5><br/>
        </div>
    </div>
</div>
<script>
    $(".reset").click(function () {
        $("#description").val("");
    })
</script>
</body>
</html>